<template>
  <div id="left-side">
    <el-menu
      default-active="1"
      :background-color="bgColor"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="true"
      @select="handleSelect"
    >
      <el-submenu v-for="(menuItem, k) in menu" v-bind:key="k" :index="menuItem['name']">
        <template slot="title">
          <i :class="iconList[k%4]"></i>
        </template>
        <el-menu-item v-for="item in menuItem['item']" v-bind:key="item" :index="item">{{item}}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { getFolderData } from "../../router/data";

export default {
  data() {
    return {
      bgColor: this.$store.state.theme.backgroundColor,
      menu: [
        {
          name: "",
          item: []
        }
      ],
      iconList: [
        "el-icon-s-unfold",
        "el-icon-s-opportunity",
        "el-icon-s-ticket",
        "el-icon-s-unfold"
      ]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$emit("listenToChildEvent", keyPath[0], keyPath[1]);
    }
  },
  created: function() {
    getFolderData()
      .then(res => {
        this.menu = res["data"]["data"];
        if (this.menu.length > 0) {
          this.$emit(
            "listenToChildEvent",
            this.menu[0]["name"],
            this.menu[0]["item"][0]
          );
        }
      })
      .catch(err => {
        this.menu = ["未成功请求到服务器"];
      });
  }
};
</script>

<style scoped>
#left-side {
  text-align: center;
}
</style>



